<template>
    <div>
        <el-card>
            <template>
            <el-select v-model="value" clearable placeholder="请选择事件类型">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
            </el-select>
            </template>
            <el-button type="primary" @click="select" style="margin-left: 10px;">查询</el-button>
        </el-card>
        <el-card>
            <div ref="openrank" id="openrank" style="height:400px;width:100%;"></div>
        </el-card>
        <el-card>
          <div ref="activity" id="activity" style="height: 400px;width: 100%;"></div>
        </el-card>
        <el-card>
          <div ref="attention" id="attention" style="height: 400px;width: 100%;"></div>
        </el-card>
    </div>
</template>

<script>
import * as echarts from 'echarts';

let openRankLine={
  title:{
    text:'openrank',
    left:'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: [ ]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'line',
      smooth: true
    }
  ]
};
let activityLine={
  title:{
    text:'activity',
    left:'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: [ ]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'line',
      smooth: true
    }
  ]
};
let attentionLine = {
  title: {
    text: 'attention',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'line',
      smooth: true
    }
  ]
};
let ROOT_PATH='https://oss.x-lab.info/open_digger/github/X-lab2017/open-digger/';
    export default {
        data(){
            return{
                options: [{
          value: '选项1',
          label: 'OpenRank'
        }, {
          value: '选项2',
          label: 'Activity'
        }, {
          value: '选项3',
          label: 'Attention'
        }],
        value: '',
        event:'',
        line:[]
            }
        },
        methods:{
            getData(url, option, chart) {
              try{
                this.$request.post('/api/data',{
                
                platform:"github",
                org:"X-lab2017",
                repo:"open-digger",
                index:url
             
            }).then(res=>{
              // console.log(res.data)
              if(res.status === 200){
                let data=res.data;
                let keys=Object.keys(data).filter(key =>key.length === 7);
                let line=keys.map(key=>data[key]);
                option.xAxis.data = keys;
                option.series[0].data = line;
                chart.setOption(option);
              }
            }).catch(error => {
                  if (error.response && error.response.status === 401) {
                      this.$router.push('/login');
                      this.$message.error('请登录');
                  } else {
                    this.$router.push('/login');
                      this.$message.error('请登录');
                      console.error('Error fetching data:', error);
                  }
              })
             
              }catch(error){
                this.$router.push('/login')
              }
                // axios.get(ROOT_PATH + url).then(res => {
                //     // console.log(res.data);
                //     let data = res.data;
                //     // 找出键的长度为7的键
                //     let keys=Object.keys(data).filter(key =>key.length === 7);
                //     // 分别找出这些键对应的值
                //     let line=keys.map(key=>data[key]);
                //     // 将这些值赋值到横纵坐标
                //     option.xAxis.data = keys;
                //     option.series[0].data = line;
                //     chart.setOption(option);
                // });
            },
            select() {
                let targetRef;
                switch (this.value) {
                    case '选项1':
                        targetRef = this.$refs.openrank;
                        break;
                    case '选项2':
                        targetRef = this.$refs.activity;
                        break;
                    case '选项3':
                        targetRef = this.$refs.attention;
                        break;
                    default:
                        this.$message.error('请选择事件类型');
                        return;
                }
                if (targetRef) {
                    targetRef.scrollIntoView({ behavior: 'smooth' });
                }
                this.value='';  
            }
        },
        mounted(){
            let openRankDom = document.getElementById('openrank');
            let openRankChart = echarts.init(openRankDom);
            openRankChart.setOption(openRankLine);
            this.getData('openrank', openRankLine, openRankChart);

            let activityDom = document.getElementById('activity');
            let activityChart = echarts.init(activityDom);
            activityChart.setOption(activityLine);
            this.getData('activity', activityLine, activityChart);

            let attentionDom = document.getElementById('attention');
            let attentionChart = echarts.init(attentionDom);
            attentionChart.setOption(attentionLine);
            this.getData('attention', attentionLine, attentionChart);
        },
        beforeDestroy(){
          if(this.openRankChart){
            this.openRankChart.clear();
            this.openRankChart=null;
          }
          // this.$refs.openrank && this.$refs.openrank.clear();
          if(this.activityChart){
            this.activityChart.clear();
            this.activityChart=null;
          }
          // this.$refs.activity && this.$refs.activity.clear();
          if(this.attentionChart){
            this.attentionChart.clear();
            this.attentionChart=null;
          }
          // this.$refs.attention && this.$refs.attention.clear();
        },
        created(){

        }
    }
</script>

<style scoped>

</style>